<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="账单信息"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 账单信息 -->
      <view class="section">
        <view class="section-title">账单信息</view>

        <view
          class="info-item"
          :class="{ vertical: billInfo.idList.length > 1 }"
        >
          <text class="info-label">账单ID：</text>
          <view class="info-value-wrapper">
            <text
              v-for="(id, index) in billInfo.idList"
              :key="index"
              class="info-value"
            >
              {{ id }}
            </text>
          </view>
        </view>

        <view class="info-item">
          <text class="info-label">账单数量：</text>
          <text class="info-value">{{ billInfo.quantity }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">应开票金额：</text>
          <text class="info-value amount">{{ billInfo.amount }} 元</text>
        </view>
      </view>

      <!-- 接收邮箱 -->
      <view class="section">
        <view class="section-title">接收邮箱</view>

        <view class="email-input-wrapper">
          <text class="input-label">邮箱地址：</text>
          <input
            v-model="email"
            class="email-input"
            type="text"
            placeholder="请输入"
            placeholder-style="color: #ccc"
          />
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="footer-action">
      <view class="confirm-btn" @click="handleConfirm">
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 账单信息
const billInfo = ref({
  idList: [],
  quantity: 0,
  amount: "0.00",
});

// 邮箱地址
const email = ref("");

// 接收路由参数
onLoad((options) => {
  if (options.billId) {
    // 单个账单
    loadBillInfo([options.billId]);
  } else if (options.billIds) {
    // 批量账单（逗号分隔）
    const billIdList = options.billIds.split(",");
    loadBillInfo(billIdList);
  }
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 加载账单信息
const loadBillInfo = async (billIdList) => {
  try {
    // TODO: 调用真实API根据账单ID数组获取数据
    // 模拟数据 - 这里应该根据实际API计算累计值
    const mockData = {
      "197873629416062792": { quantity: 1, amount: 0.21 },
      "186431860718898790": { quantity: 1, amount: 556.91 },
      "186431860715123916": { quantity: 1, amount: 0.21 },
    };

    let totalQuantity = 0;
    let totalAmount = 0;

    billIdList.forEach((id) => {
      const data = mockData[id];
      if (data) {
        totalQuantity += data.quantity;
        totalAmount += data.amount;
      }
    });

    billInfo.value = {
      idList: billIdList,
      quantity: totalQuantity || billIdList.length,
      amount: totalAmount.toFixed(2),
    };
  } catch (error) {
    console.error("加载账单信息失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

// 确认提交
const handleConfirm = () => {
  if (!email.value) {
    uni.showToast({
      title: "请输入邮箱地址",
      icon: "none",
    });
    return;
  }

  // 验证邮箱格式
  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailReg.test(email.value)) {
    uni.showToast({
      title: "请输入正确的邮箱地址",
      icon: "none",
    });
    return;
  }

  // TODO: 调用API提交数据（单个或批量）
  const message =
    billInfo.value.idList.length > 1
      ? `已提交 ${billInfo.value.idList.length} 个账单`
      : "提交成功";

  uni.showToast({
    title: message,
    icon: "none",
  });

  // 延迟返回
  setTimeout(() => {
    goBack();
  }, 1500);
};

onMounted(() => {
  // 组件挂载后的操作
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-bottom: 160rpx;
}

// 区块
.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 32rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 32rpx;
}

// 信息项
.info-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &.vertical {
    align-items: flex-start;
  }

  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  font-size: 28rpx;
  color: #666;
  min-width: 180rpx;
  flex-shrink: 0;
}

.info-value-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  word-break: break-all;

  &.amount {
    color: #ff4d4f;
    font-weight: 600;
  }
}

// 邮箱输入
.email-input-wrapper {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
}

.input-label {
  font-size: 28rpx;
  color: #666;
  min-width: 180rpx;
}

.email-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;

  &::placeholder {
    color: #ccc;
  }
}

// 底部操作按钮
.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
}

.confirm-btn {
  height: 88rpx;
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  font-weight: 600;

  &:active {
    opacity: 0.9;
  }
}
</style>
